<template>
  <div>
    <h1>这是首页</h1>
    <router-link to="/news">到新闻页</router-link>
    <hr>
    <button @click="addNum(5)">+</button>
    <button @click="addNumAsync">异步+</button>
    {{ num }}
    <button @click="reduceNum">-</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Home',
  methods: {
    addNum (n) {
      // commit mutation 修改状态
      this.$store.commit('add_num', n)
    },
    addNumAsync () {
      this.$store.dispatch('add_num_async', 100)
    },
    reduceNum () {
      this.$store.commit('reduce_num', 10)
    }
  },
  computed: {
    ...mapState(['num'])
  }
}
</script>

<style lang="scss" scoped>

</style>
